import {useCallback, useEffect, useState} from 'react';
import {useTranslation} from 'react-i18next';
import {Link} from 'react-router-dom';
import pcLogoPng from '@/assets/pc-logo.png';
import DownSvg from '@/assets/down.svg?react';
import i18n from "@/i18n";
import useDeviceDetector from '../useDeviceDetector';
import lngPng from './asstes/lng.png';
import './index.css';

export default function Navigation() {
    const [lng, setLng] = useState('');
    useDeviceDetector();
    const {t} = useTranslation();

    const handleChangeLan = useCallback(
        () => {
            if (lng === 'zh') {
                setLng('en');
                i18n.changeLanguage("en");
                localStorage.setItem('i18nextLng', 'en');
            } else {
                setLng('zh');
                i18n.changeLanguage("zh");
                localStorage.setItem('i18nextLng', 'zh');
            }
        },
        [lng]
    );


    useEffect(
        ()=>{
            //查看是否存在默认语言
            const lang = localStorage.getItem('i18nextLng');
            if (lang) {
                setLng(lang)
                i18n.changeLanguage(lang)
            } else {
                localStorage.setItem('i18nextLng', 'zh');
                i18n.changeLanguage("zh")
            }
        },
        []
    );

    return (
        <div className="pc-navigation-layout">
            <div className="pc-navigation-layout-wrapper">
                <Link to="/">
                    <img src={pcLogoPng} alt="logo" className="pc-navigation-layout-logo"/>
                </Link>
                
                <div className="pc-navigation-item pc-navigation-item-knowledge">
                    <span>{t('知识科普')}</span>
                    <DownSvg className="pc-navigation-item-icon" />

                    <div className="pc-navigation-item-knowledge-popover">
                        <div className="pc-navigation-item-knowledge-popover-content">
                            <div className="pc-navigation-item-knowledge-popover-content-item">
                                <Link to="/knowledge/encyclopedia">
                                    <div className="pc-navigation-item-knowledge-popover-content-item-title">{t('疾病百科')}</div>
                                    <div className="pc-navigation-item-knowledge-popover-content-item-description">{t('基本介绍和相关科普')}</div>
                                </Link>
                            </div>
                            <div className="pc-navigation-item-knowledge-popover-content-item">
                                <Link to="/knowledge/faq">
                                    <div className="pc-navigation-item-knowledge-popover-content-item-title">{t('答疑释惑')}</div>
                                    <div className="pc-navigation-item-knowledge-popover-content-item-description">{t('疾病常见问题解答')}</div>
                                </Link>
                            </div>
                            <div className="pc-navigation-item-knowledge-popover-content-item">
                                <Link to="/knowledge/media">
                                    <div className="pc-navigation-item-knowledge-popover-content-item-title">{t('媒体资源')}</div>
                                    <div className="pc-navigation-item-knowledge-popover-content-item-description">{t('包含基本介绍和相关科普')}</div>
                                </Link>
                            </div>
                        </div>
                    </div>
                </div>
                <Link to="/vision-test">
                    <div className="pc-navigation-item">
                            {t('辨色测试')}
                    </div>
                </Link>
                <Link to="/knowledge/encyclopedia">
                    <div className="pc-navigation-item">{t('专家支持')}</div>
                </Link>
                <Link to="/project">
                    <div className="pc-navigation-item">{t('项目介绍')}</div>
                </Link>
            </div>
            <div className="pc-navigation-layout-operation">
                <div
                    className="pc-navigation-layout-operation-lng"
                    onClick={handleChangeLan}
                >
                    <img src={lngPng} alt="lng" className="pc-navigation-layout-operation-lng-icon"/>
                    <span className="pc-navigation-layout-operation-lng-action">
                        {lng === 'zh' ? 'Switch to English' : '切换到中文'}
                    </span>
                </div>
                <Link to="/connect-us">
                    <div className="pc-navigation-layout-operation-contact">
                            {t('联系我们')}
                    </div>
                </Link>
            </div>
        </div>
    );
}
